3.5 Layouts

Motivations
- Can you see any background layout in TRU Board Games Playground?

Layouts
- TRU Board Game Playground uses a framework called Bootstrap.
- Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.
- Read all in Bootstrap Tutorial.
- Read all in Bootstrap Get Started.
  - What is RWD?
  - What does Bootstrap include? Are design templates included?
  - <meta> tag?
  - Typical structure to use Bootstrap
    1. <meta> tag
    2. Bootstrap CSS library
    3. jQuery library
    4. Bootstrap JS library
    5. div.container or div.container-fluid class - not nestable
- How to adjust the layout?
  - Read all in Bootstrap Grids.
  - div.col-(xs|sm|md|lg)-(1|2|...|12) within div.row
- Trial 1: Let's try to give good divisions. Two rows, and two columns in the second row.
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class=???> <div class=??? style='background-color:LightBlue; height:100px;'> <h1 style='???:center'>When you want more, you can get more.</h1> </div> <div class=???> <div class='col-sm-2' style='background-color:LightGreen; height:200px;'> What a great world! </div> <div class='col-???-???' style='background-color:LightYellow; height:200px;'> What a wonderful world! </div> </div> </div>
- How many rows and columns can you see in TRU Board Game Playground?
Lab 2.
- The layout in the next program, lab2_bgp.html, is not correctly supported.
- Find the place for the container, rows and columns, and fix them.
- Let's download and complete the program.
  - lab2_bgp.html
  - menu_icon.png

Learning outcomes